<template>
<div>
    <van-divider
        :style="{ color: '#333333', borderColor: '#333333', padding: '0 80px' }"
    >
        <h3>新人专享礼</h3>
    </van-divider>

    <div class="welfare">
        <div class="welfare_left">
            <p class="welfare_text">新人专享礼</p>
            <div class="model">
                <img src="../img/static-union_1648017994dd2933.png" alt="" />
            </div>
        </div>
        <div class="welfare_right">
            <div class="welfareService">
                <div class="subTitle">
                    <p>{{ welfareServiceObj?.title }}</p>
                    <p style="font-size: 10px;">{{ welfareServiceObj?.subTitle }}</p>
                </div>
                <div class="picUrlImg">
                    <img :src="welfareServiceObj?.picUrl" alt="">
                </div>
                <div class="price">
                    <p>{{ welfareServiceObj?.activityPrice }}</p>
                    <del>{{ welfareServiceObj?.originPrice }}</del>
                </div>
            </div>
            <div class="rookiegroup">
                <div class="subTitle">
                    <p>{{ rookieGroupObj?.title }}</p>
                    <p class="tag">{{ rookieGroupObj?.tag }}</p>
                </div>
                <div class="picUrlImg">
                    <img :src="rookieGroupObj?.picUrl" alt="">
                </div>
                <div class="price">
                    <p>{{ rookieGroupObj?.activityPrice }}</p>
                    <del>{{ rookieGroupObj?.originPrice }}</del>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"
  export default defineComponent({
    name:'FreshmanModule',
  })
</script>

<script lang="ts" setup>
import {ref,onMounted} from "vue"
import {reqBannerList} from "@/api/homeApi"
import type {welfareInfo} from "@/types/homeTypes"

let welfareServiceObj = ref<welfareInfo>()
let rookieGroupObj = ref<welfareInfo>()

async function getWelfare(){
   let {data} = await reqBannerList()
   welfareServiceObj.value = data.indexActivityModule[0]
   rookieGroupObj.value = data.indexActivityModule[1]
}

onMounted(()=>{
    getWelfare()
})
</script>

<style lang="scss" scoped>
    .welfare{
        width: 95%;
        height: 220px;
        margin:20px auto;
        .welfare_left{
            width: 49.6%;
            height: 100%;
            background-color: #f9e9cf;
            box-sizing: border-box;
            padding-top: 15px;
            float: left;
            .welfare_text{
                font-size: 16px;
                margin: 0 0 0 15px;
            }
            .model{
                margin-top: 15px;
                text-align: center;
                img{
                    width: 85%;
                    height: 60%;
                }
            }
        }
        .welfare_right{
            width: 49.6%;
            height: 100%;
            box-sizing: border-box;
            float: right;
            position: relative;
            .welfareService{
                height: 49.6%;
                background-color: #fbe2d3;
                font-size: 16px;
                padding: 10px 5px;
                box-sizing: border-box;
                .picUrlImg{
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .price{
                    width: 50px;
                    height: 50px;
                    background-color: #f6a447;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 15px;
                    padding-top: 10px;
                    box-sizing: border-box;
                    color: #fff;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                }
            }
            .rookiegroup{
                width: 100%;
                height: 49.6%;
                background-color: #ffecc2;
                position: absolute;
                bottom: 0;
                font-size: 14px;
                .subTitle{
                    padding:10px 5px;
                    .tag{
                        font-size: 10px;
                        width: 60px;
                        height: 20px;
                        background-color: rgba(203, 182, 147,0.5);
                        border: 1px solid rgba(203, 182, 147,0.5);
                        border-radius: 4px;
                        text-align: center;
                        line-height: 20px;
                        color: #fff;
                    }
                }
                .picUrlImg{
                    width: 100px;
                    height: 70px;
                    position: absolute;
                    bottom: 10px;
                    right: 5px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .price{
                    width: 50px;
                    height: 50px;
                    background-color: #f6a447;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 15px;
                    padding-top: 10px;
                    box-sizing: border-box;
                    color: #fff;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                }
            }
        }
    }
</style>